<link type="text/css" href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.2/theme-chalk/index.css" rel="stylesheet">
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.2/index.js"></script>
<style type="text/css">
	.container-box{
		display: flex;
	}
	.elementui-leftbox{
		flex: 0 0 20vw;
		height: 100vh;
		background-color: #666;
	}
	.rightbox{
		flex: 0 0 80vw;
		height: 100vh;
		background-color: #888;
	}
	.el-menu-vertical-demo{
		height: 100vh;
	}
</style>



<div class="container-box">
	<div class="elementui-leftbox">
		<!-- 框架的组件文档 "https://element.eleme.cn/#/zh-CN/component/menu" -->
		<div id="app">
			<el-menu
			default-active="2"
			class="el-menu-vertical-demo"
			@open="handleOpen"
			@close="handleClose"
			@select="handleSelect"
			background-color="#545c64"
			text-color="#fff"
			active-text-color="#ffd04b">
			<el-submenu index="1">
				<template slot="title">
					<i class="el-icon-location"></i>
					<span>导航一</span>
				</template>
				<el-menu-item-group>
					<template slot="title">分组一</template>
					<el-menu-item index="1-1">选项1</el-menu-item>
					<el-menu-item index="1-2">选项2</el-menu-item>
				</el-menu-item-group>
				<el-menu-item-group title="分组2">
					<el-menu-item index="1-3">选项3</el-menu-item>
				</el-menu-item-group>
				<el-submenu index="1-4">
					<template slot="title">选项4</template>
					<el-menu-item index="1-4-1">选项1</el-menu-item>
				</el-submenu>
			</el-submenu>
			<el-menu-item index="2">
				<i class="el-icon-menu"></i>
				<span slot="title">导航二</span>
			</el-menu-item>
			<el-menu-item index="3" disabled>
				<i class="el-icon-document"></i>
				<span slot="title">导航三</span>
			</el-menu-item>
			<el-menu-item index="4">
				<i class="el-icon-setting"></i>
				<span slot="title">导航四</span>
			</el-menu-item>
		</el-menu>
	</div>
</div>


<!-- 右侧内容区域 -->
<div class="rightbox">


</div>
</div>

<script type="text/javascript">
	//组件初始化
	var Main = {
		methods: {
			handleOpen(key, keyPath) {
				console.log(key, keyPath);
			},
			handleClose(key, keyPath) {
				console.log(key, keyPath);
			},
			handleSelect(key, keyPath) {
				console.log(key, keyPath);
	        //获取当前点击元素对象
	        //console.log($('.el-menu').children().eq(keyPath[0]-1).text());
	   		}
		}
	}
	var Ctor = Vue.extend(Main);
	new Ctor().$mount('#app')
</script>
